
<template>
  <div class="bottomMain">
    <div class="barFrame">
      <el-tabs type="border-card">
        <el-tab-pane label="宝贝详情">
          <div class="elTabFrame">
            <div class="detailsFrame">
              <img v-for="(item,index) in commodityDetails"
                :key="index"
                :src="item" />
            </div>

            <div class="guessLike">
              <el-divider>猜你喜欢</el-divider>
              <p style="font-size:15px;">Guess you like it</p>
              <div class="guessLikeGoods">

              </div>
            </div>

          </div>
        </el-tab-pane>
        <el-tab-pane label="商品评论">
            {{moreSatate}}
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    moreSatate: {
      type: Array,
    },
  },
  data() {
    return {
      ges: {
        color: 'red',
      },
      commodityDetails: [
        'https://img-2.pddpic.com/mms-material-img/2021-07-29/80c1eddf-6adf-4127-bfa5-adfed3301dda.jpeg.a.jpeg?imageView2/2/w/1300/q/80',
        'https://img-2.pddpic.com/mms-material-img/2021-07-29/b90c66ce-ea2f-470a-91e0-f4a0a553c80a.jpeg.a.jpeg?imageView2/2/w/1300/q/80',
        'https://img-2.pddpic.com/mms-material-img/2021-07-29/3378fbfb-e3b6-40da-9d7c-3b3ffd72f1b4.jpeg.a.jpeg?imageView2/2/w/1300/q/80',
        'https://img-2.pddpic.com/mms-material-img/2021-07-29/e9d2f8aa-6ea2-488a-8914-ab98cc219381.jpeg.a.jpeg?imageView2/2/w/1300/q/80',
        'https://img-2.pddpic.com/mms-material-img/2021-07-29/19bed4c2-d9c5-4aa6-84e8-aa73b4404723.jpeg.a.jpeg?imageView2/2/w/1300/q/80',
        'https://img-2.pddpic.com/mms-material-img/2021-07-29/c98567c5-9ba2-48eb-8bc8-cd5d0919d594.jpeg.a.jpeg?imageView2/2/w/1300/q/80',
        'https://img-2.pddpic.com/mms-material-img/2021-07-29/02099835-bcaa-4d57-ae8a-b302e1bb2824.jpeg.a.jpeg?imageView2/2/w/1300/q/80',
        'https://img-2.pddpic.com/mms-material-img/2021-07-29/d1d5590e-8b94-426c-b00b-8a7fe3c7b43f.jpeg.a.jpeg?imageView2/2/w/1300/q/80',
      ],
    };
  },
};
</script>

<style scoped>
.bottomMain {
  width: 100%;
  display: flex;
  text-align: center;
  padding: 30px;
  align-items: center;
  justify-content: space-around;
  box-sizing: border-box;
  background-color: white;
}

.barFrame {
  width: 1200px;
  display: flex;
}

.el-tabs {
  width: 100%;
  
}

.elTabFrame {
  width: 100%;
  display: flex;
  justify-content: space-between;
  
}

.detailsFrame {
  display: flex;
  flex-direction: column;
}

.guessLike {
  display: flex;
  flex-direction: column;
  width: 40%;
  box-sizing: border-box;
  padding: 20px;
}

.el-divider--horizontal {
  height: 3px;
}

.el-divider__text.is-center {
  font-size: 20px;
  font-weight: bold;
}
</style>